<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字小游戏</title>
</head>

<body>
    <!-- 先搭建html 然后再加上js -->
    <h1 style="color: rgb(105, 105, 239);">猜数字小游戏</h1>
    <button id="reset" style="font-size: 15px;">重新开始一轮新游戏</button><br>
    <span>请输入要猜的数字：</span><input type="number" id="guess"><button id="req">提交</button> <br>
    <span>已经猜的次数：</span><span id="num"></span><br>
    <span>结果：</span><span id="result"></span>

    <script src="js/jquery.min.js"></script>
    <script>
        // 在初始的时候以及点击重新开始的时候生成一个随机数
        let num = Math.floor(Math.random() * 100) + 1;
        let count = 0;
        console.log(num);

        // 输入要猜的数字
        $("#req").click(function () {
            let guessNum = $("#guess").val();
            count++;
            $("#num").text(count);
            if (guessNum > num) {
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            } else if (guessNum < num) {
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            } else {
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }
        });

        //重新开始
        $("#reset").click(function () {
            count = 0;
            num = Math.floor(Math.random() * 100) + 1;
            $("#result").text("");
            $("#guess").val("");
            $("#num").text("");
            console.log(num);

        });

    </script>
</body>

</html>